<template>
  <div class="addcategory_box">
    <el-form
      :model="ruleForm"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <!-- 上级分类 -->
      <el-form-item label="上级分类">
        <el-select v-model="ruleForm.category" placeholder="请选择分类">
          <el-option label="分类一" value="shanghai"></el-option>
          <el-option label="分类二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <!-- 分类名称 -->
      <el-form-item label="分类名称" style="width: 320px">
        <el-input v-model="ruleForm.category"></el-input>
      </el-form-item>

      <!-- 分类图片 -->
      <el-form-item label="分类图片" style="width: 320px">
        <el-upload
          class="avatar-uploader"
          action
          :show-file-list="false"
          :before-upload="beforeAvatarUpload"
          name="good_pic"
          :http-request="uploadPicFn"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>

      <!-- 上架 -->
      <el-form-item label="上架">
        <el-switch v-model="ruleForm.delivery"></el-switch>
      </el-form-item>
      <!-- 排序 -->
      <el-form-item label="排序">
        <el-input v-model="ruleForm.sort" style="width: 220px"></el-input>
      </el-form-item>

      <!-- 分类描述 -->
      <el-form-item label="分类描述" style="width: 320px">
        <el-input v-model="ruleForm.info" type="textarea"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">保存</el-button>
        <el-button @click="resetForm">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
     ruleForm: {
        // 所属分类
        category: "",
        // 商品名称
        goodname: "",
        // 商品品牌
        brand: "",
        // 商品简介
        info: "",
        // 商品单位
        unit: "",
        // 商品库存
        good_num: "",
        // 商品售价
        good_price: "",
        // 上架
        delivery: false,
        // 推荐类型
        type: [],
        // 排序
        sort: "",
      },
      // 商品图片
      imageUrl: "",
    };
  },
  methods: {
    beforeAvatarUpload() {},
    uploadPicFn() {},
    // 确认保存
    submitForm() {
      this.$router.push("/category");
    },
    // 取消
    resetForm() {
      this.$router.push("/category");
    },
  },
};
</script>
 
<style lang = "less" scoped>
.addcategory_box{
    background-color: #fff;
    padding: 10px 10px 30px;
}
.avatar-uploader .el-upload {
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>